<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{this.$t('基本信息')}}</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{$t('Coupon_ID')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Name')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Coupon_type')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Lowest_spending_value')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('折扣类型')}}</el-col>
          <el-col :span="4" class="table-cell-title">
            <span v-if="coupon.discountType == 1">
              {{$t('优惠面值')}}
            </span>
            <span v-else>
              {{$t('优惠折扣')}}
            </span>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ coupon.id }}</el-col>
          <el-col :span="4" class="table-cell">{{ coupon.name }}</el-col>
          <el-col :span="4" class="table-cell">{{ formatType(coupon.type)  }}</el-col>
          <el-col :span="4" class="table-cell">{{$t('Full')}}{{ coupon.min }}元可用</el-col>
          <el-col v-if="coupon.discountType == 1" :span="4" class="table-cell">
            <el-tag>{{$t('满减')}}</el-tag>
          </el-col>
          <el-col v-else :span="4" class="table-cell">
            <el-tag>{{$t('百分比')}}</el-tag>
          </el-col>
          <el-col :span="4" class="table-cell">
            <span v-if="coupon.discountType == 1">
              {{$t('Discount')}}{{ coupon.discount }}{{$t('Dollars')}}
            </span>
            <span v-else>
              {{$t('折扣')}}{{ coupon.discountRate }}{{$t('%')}}
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell-title">{{$t('Current_status')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('商品范围')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('有效期')}}</el-col>
          <el-col v-if="coupon.type == 3" :span="4" class="table-cell-title">{{$t('剩余数量')}}</el-col>
          <el-col v-else :span="4" class="table-cell-title">{{$t('发行数量')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('与商品活动价共用')}}</el-col>
          <el-col v-show="coupon.type == 2" :span="4" class="table-cell-title">{{$t('优惠券码')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ formatStatus(coupon.status)  }}</el-col>
          <el-col :span="4" class="table-cell">{{ formatGoodsType(coupon.goodsType)  }}</el-col>
          <el-col :span="4" class="table-cell" :title="getTimeScope()">{{ getTimeScope() }}</el-col>
<!--          <el-col :span="4" class="table-cell">{{ coupon.code }}</el-col>-->
          <el-col v-if="coupon.type == 3" :span="4" class="table-cell">{{coupon.surplus}}</el-col>
          <el-col v-else :span="4" class="table-cell">{{ coupon.total === 0 ? this.$t("不限") : coupon.total }}</el-col>
          <el-col :span="4" class="table-cell">
            {{coupon.promotionOnly == 0 ? this.$t("共用") : this.$t("不共用")}}
          </el-col>
          <el-col v-show="coupon.type == 2" :span="4" class="table-cell">
            <el-button type="primary" @click="handleQrcode">{{$t('查看')}}</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell-title">{{$t('Explanation')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell">{{coupon.useInstruction}}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card v-if="coupon.goodsType == 2">
      <div slot="header" class="clearfix">
        <span>{{$t('指定商品')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('Store_belong')" prop="shopName">
        </el-table-column>
        <el-table-column align="center" :label="$t('Merchandise_name')" prop="name"/>
        <el-table-column align="center" :label="$t('Merchandise_code')" prop="goodsSn"/>

      </el-table>

      <pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="listGoodsQuery.page" :limit.sync="listGoodsQuery.limit" @pagination="getGoodsList" />
    </el-card>

    <el-card v-if="coupon.goodsType == 1">
      <div slot="header" class="clearfix">
        <span>{{$t('指定类目列表')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('Category_Name')" prop="name"/>
      </el-table>

      <pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="listGoodsQuery.page" :limit.sync="listGoodsQuery.limit" @pagination="getCategoryList" />
    </el-card>
    <el-card v-if="coupon.type != 3">
      <div slot="header" class="clearfix">
        <span>{{$t('优惠券使用统计')}}</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{$t('已领取数量')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('已使用数量')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('使用优惠券订单总额')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('总优惠金额')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('总订单价格')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ statistics.pullNumber != 0 ? statistics.pullNumber : 0 }}</el-col>
          <el-col :span="4" class="table-cell">{{ statistics.usedNumber != 0 ? statistics.usedNumber : 0  }}</el-col>
          <el-col :span="4" class="table-cell">${{ statistics.orderTotalPrice != 0 ? statistics.orderTotalPrice : 0  }}</el-col>
          <el-col :span="4" class="table-cell">$ {{ statistics.orderTotalDiscount != 0 ? statistics.orderTotalDiscount : 0   }}</el-col>
          <el-col :span="4" class="table-cell">$ {{ statistics.orderTotalActual != 0 ? statistics.orderTotalActual : 0  }}</el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 查询操作 -->
<!--    <div v-if="coupon.type != 3" class="filter-container">-->
<!--      <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" :placeholder="$t('Please_enter_member_ID')"/>-->
<!--      <el-select v-model="listQuery.status" clearable style="width: 200px" class="filter-item" :placeholder="$t('请选择使用状态')">-->
<!--        <el-option v-for="type in useStatusOptions" :key="type.value" :label="type.label" :value="type.value"/>-->
<!--      </el-select>-->
<!--      <el-button v-permission="['GET /admin/coupon/listuser']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>-->
<!--    </div>-->

    <!-- 查询结果 -->
<!--    <el-table v-if="coupon.type != 3" v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>-->
<!--      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>-->

<!--      <el-table-column align="center" :label="$t('用户优惠券ID')" prop="id" sortable/>-->

<!--      <el-table-column align="center" :label="$t('Member_ID')" prop="userId"/>-->

<!--      <el-table-column align="center" :label="$t('领取时间')" prop="addTime"/>-->

<!--      <el-table-column align="center" :label="$t('使用状态')" prop="status">-->
<!--        <template slot-scope="scope">{{ formatUseStatus(scope.row.status)  }}</template>-->
<!--      </el-table-column>-->

<!--      <el-table-column align="center" :label="$t('订单ID')" prop="orderId"/>-->

<!--      <el-table-column align="center" :label="$t('使用时间')" prop="usedTime"/>-->

<!--    </el-table>-->

<!--    <el-card v-if="coupon.areaLimit == 1">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>{{$t('限制地区列表')}}</span>-->
<!--      </div>-->
<!--      &lt;!&ndash; 查询结果 &ndash;&gt;-->
<!--      <el-table v-loading="listRegionsLoading" :data="regionsList" :element-loading-text="$t('Searching')" border fit highlight-current-row>-->
<!--        <el-table-column align="center" :label="$t('Regions_Name')" prop="nameEn"/>-->
<!--      </el-table>-->

<!--      <pagination v-show="regionsTotal>0" :total="regionsTotal" :page.sync="listRegionsQuery.page" :limit.sync="listRegionsQuery.limit" @pagination="getRegionList" />-->
<!--    </el-card>-->

<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRegionList" />-->

    <!-- 回复反馈对话框 -->
    <el-dialog :visible.sync="qrcodeDialogVisible" :title="$t('优惠券码')">
      <div align="center" @click="">
        <div style="font-size:25px">{{coupon.barCode}}</div>
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { readCoupon, listCouponUser, listCouponGoods, couponStatistics, listCouponCategory } from '@/api/coupon'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { allForPerm } from '@/api/shop'
import QRCode from "qrcodejs2";
import { listCouponRegions } from '../../api/coupon'

export default {
  name: 'entityCouponDetail',
  components: { Pagination, QRCode },
  filters: {

  },
  data() {
    const defaultTypeOptions = [

      {
        label: this.$t('电子优惠券'),
        value: 1
      },
      {
        label: this.$t('实体优惠券'),
        value: 2
      },{
        label: this.$t('推广优惠券'),
        value: 3
      }
    ]

    const defaultUseStatusOptions = [
      {
        label: this.$t('未使用'),
        value: 0
      },
      {
        label: this.$t('已使用'),
        value: 1
      },
      {
        label: this.$t('Expired'),
        value: 2
      },
      {
        label: this.$t('Merchandise_removed'),
        value: 3
      }
    ]

    return {
      defaultTypeOptions,
      defaultUseStatusOptions,
      typeOptions: Object.assign({}, defaultTypeOptions),
      useStatusOptions: Object.assign({}, defaultUseStatusOptions),
      coupon: {},
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        couponId: 0,
        userId: undefined,
        status: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      goodsList: [],
      regionsList: [],
      goodsTotal: 0,
      regionsTotal: 0,
      listGoodsLoading: true,
      listRegionsLoading: false,
      listGoodsQuery: {
        page: 1,
        limit: 20,
        id: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      listRegionsQuery: {
        page: 1,
        limit: 20,
        id: 0,
        sort: 'add_time',
        order: 'desc'
      },
      downloadLoading: false,
      shops:[],
      statistics:{},
      qrcodeDialogVisible: false,
      qrcodeData: undefined
    }
  },
  async created() {
    await this.init()
    if (this.$route.query.id == null) {
      return
    }
    this.listGoodsQuery.id = this.$route.query.id
    this.listRegionsQuery.id = this.$route.query.id
    if(this.coupon.goodsType == 2){

      await this.getGoodsList()
    }else if( this.coupon.goodsType == 1){

      await this.getCategoryList()

    }
    await this.getRegionList()
    couponStatistics({
      id: this.listGoodsQuery.id
    }).then(response=>{
      this.statistics = response.data.data
    })
    allForPerm().then(response=>{
      this.shops = response.data.data.list
    })

  },
  mounted(){

  },
  methods: {
    formatType(type) {
      for (let i = 0; i < this.defaultTypeOptions.length; i++) {
        if (type === this.defaultTypeOptions[i].value) {
          return this.defaultTypeOptions[i].label
        }
      }
      return ''
    },
    formatGoodsType(goodsType) {
      if (goodsType === 0) {
        return this.$t('Usable_in_any_situation')
      } else if (goodsType === 1) {
        return this.$t('Select_category')
      } else {
        return this.$t('Select_merchandise')
      }
    },
    formatStatus(status) {
      if (status === 0) {
        return this.$t('正常')
      } else if (status === 1) {
        return this.$t('已上架')
      } else {
        return this.$t('已下架')
      }
    },
    formatUseStatus(status) {
      if (status === 0) {
        return this.$t('未使用')
      } else if (status === 1) {
        return this.$t('已使用')
      } else if (status === 3) {
        return this.$t('Expired')
      } else {
        return this.$t('Merchandise_removed')
      }
    },
    levelMemberFilter(level){
      if (level === 0) {
        return this.$t('普通会员')
      } else if (level === 1) {
        return this.$t('银卡会员')
      } else if (level === 2) {
        return this.$t('金卡会员')
      } else if (level === 3) {
        return this.$t('钻石会员')
      } else{
        return this.$t('无限制')
      }
    },
    moneyMemberFilter(level){
      if (level === 0) {
        return this.$t('畅享月票会员')
      } else if (level === 1) {
        return this.$t('畅享年票会员')
      } else if (level === 2) {
        return this.$t('早餐月票会员')
      } else if (level === 3) {
        return this.$t('早餐年票会员')
      } else{
        return this.$t('无限制')
      }
    },
    async init() {
      if (this.$route.query.id == null) {
        return
      }
      return  readCoupon(this.$route.query.id).then(response => {
        this.coupon = response.data.data
      })
       this.listQuery.couponId = this.$route.query.id
      await this.getList()
    },
    getList() {
      this.listLoading = true
      return listCouponUser(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getRegionList(){
      this.listRegionsLoading = true
      return listCouponRegions(this.listRegionsQuery)
        .then(response => {
          this.regionsList = response.data.data.list
          this.regionsTotal = response.data.data.total
          this.listRegionsLoading = false
        })
        .catch(() => {
          this.regionsList = []
          this.regionsTotal = 0
          this.listRegionsLoading = false
        })
    },
    getGoodsList(){
      this.listGoodsLoading = true
     return  listCouponGoods(this.listGoodsQuery)
        .then(response => {
          this.goodsList = response.data.data.list
          for (let i = 0; i < this.goodsList.length; i++) {
            if(this.goodsList[i].shopName == "" || this.goodsList[i].shopName == null){
              this.goodsList[i].shopName = this.$t('总部')
            }
          }
          this.goodsTotal = response.data.data.total
          this.listGoodsLoading = false
        })
        .catch(() => {
          this.goodsList = []
          this.goodsTotal = 0
          this.listGoodsLoading = false
        })
    },
    getCategoryList(){
      this.listGoodsLoading = true
      return listCouponCategory(this.listGoodsQuery)
        .then(response => {
          this.goodsList = response.data.data.list
          this.goodsTotal = response.data.data.total
          this.listGoodsLoading = false
        })
        .catch(() => {
          this.goodsList = []
          this.goodsTotal = 0
          this.listGoodsLoading = false
        })
    },
    async handleFilter() {
      this.listQuery.page = 1
      await this.getList()
    },
    getTimeScope() {
      if(this.coupon.timeType === 2){
        return this.$t('永久有效')
      }else{
        if (this.coupon.timeType === 0) {
          return this.$t('领取') + this.coupon.days + this.$t('天有效')
        } else if (this.coupon.timeType === 1) {
          return this.$t('自') + this.coupon.startTime + this.$t('至') + this.coupon.endTime + this.$t('有效')
        } else {
          return this.$t('未知')
        }
      }

    },
    getGoodsScope() {
    },
    qrcode() {//这里是调用的方法
      this.qrcodeData =  new QRCode("qrcode", {
        width: 200, // 设置宽度
        height: 200, // 设置高度
        text: this.coupon.barCode,
      });
    },
    handleQrcode(){
      this.qrcodeDialogVisible = !this.qrcodeDialogVisible
      if(!this.qrcodeData){
        this.$nextTick(function() {
          this.qrcode();
        });
      }
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    }
  }
}
</script>
<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}
.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}
.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
